<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <!-- title -->
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>市民卡订单</h2>
        </div>
      </div>

      <!-- 搜索 -->
      <div class="normal-box-bd">
        <div class="clearfix mb-20">

          <Input
            class="mr-10"
            v-model="queryData.userName"
            placeholder="用户名"
            :clearable=true
            style="width: 200px"
          />
          <Input
            class="mr-10"
            v-model="queryData.outTradeNo"
            placeholder="订单号"
            :clearable=true
            style="width: 200px"
          />
          <Button
            type="primary"
            custom-icon="iconfont icon-chaxun"
            size="small"
            @click="getList"
            >查找</Button
          >
        </div>
      </div>

      <div>
        <i-table
          stripe
          highlight-row
          border
          :content="self"
          :columns="Tcolumns"
          :data="dataList"
        ></i-table>
      </div>
      <div class="page">
        <Page
          :total="queryData.totalRecord"
          :page-size="queryData.limit"
          :current="queryData.page"
          show-total
          show-elevator
          @on-change="changepage"
        ></Page>
      </div>

    </div>
  </div>
</template>

<script>
import Request from "@/api/request.js";
export default {
  data() {
    return {
      dataList: [],
      keyWords: "", // 搜索关键字
      // 获取数据配置
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        mobile: "",
      },

      // 表格配置
      self: this,
      Tcolumns: [
        { align: "center", title: "机器编号", key: "machineCode" },
        { align: "center", title: "用户名", key: "userName" },
        { align: "center", title: "订单号", key: "outTradeNo" },
        {
            align: "center",
            title: "支付状态",
            render: (h,params)=> {
                let s = Number(params.row.payStatus)
                let txt,color;
                switch(s) {
                    case 0: txt = '支付成功';color = '#02d792';break;
                    case 1: txt = '支付失败';color = '#F56C6C';break;
                    case 2: txt = '已退款';color = '#409EFF';break;
                }
                return h('div',{
                    style: {
                        background: color,
                        color: '#fff',
                        borderRadius: '20px',
                        width: '64px',
                        margin: '0 auto',
                        padding: '2px 0'
                    },
                },txt)
            }
        },
        { align: "center", title: "支付积分", key: "payIntegral" },
        { align: "center", title: "创建时间", key: "createTime" },
        {
            align:"center",
            title: "操作",
            render: (create, params)=> {
                return create('Button', {
                    props: {type: 'info',size: 'small',disabled:params.row.payStatus==0?false:true},
                    on: {click: () => {this.reimburse(params.row)}}
                },'退款')
            }
        },

      ],
    };
  },
  mounted() {
    console.log(99, window.defArea);
    this.getList();
  },
  methods: {
    // 获取用户列表
    async getList() {
      let data = (await Request("get", this.queryData, "ckBankBill/page")).data;
      this.queryData.totalRecord = data.totalRecord;
      this.dataList = data.list;
      console.log(123, this.dataList);
    },

    // 分页切换
    changepage(index) {
      this.queryData.page = index;
      this.getList();
    },

    // 查询清空
    clearQuery() {
      this.queryData.userId = "";
      this.queryData.name = "";
      this.queryData.phone = "";
    },

    // 退款
    reimburse(data) {
        this.$Modal.confirm({
        title: "退款确认",
        content:
          `<p>订单号为${data.outTradeNo}</p>`,
        loading: true,
        onOk: async () => {
            let res = await Request("get", '', `ckBankBill?orderId=${data.outTradeNo}`)
            let resD = res.data
            switch(resD) {
                case '2000': this.$Message.success("退款成功");break;
                case '2010': this.$Message.warning("无此记录");break;
                case '2020': this.$Message.info("已撤销");break;
                case '2030': this.$Message.info("退款处理中，请勿频繁操作");break;
                case '2040': this.$Message.warning("只能操作金额为正数的订单");break;
                case '2050': this.$Message.error("积分账户信息丢失");break;
            }
            // if(resD) {
            //   this.$Message.success("操作成功")
            //   this.getList()
            //   this.$Modal.remove();
            //   return
            // }
            // let message = res.message
            // this.$Message.error(message)
            this.$Modal.remove();
        }
      });
    },

    // 六级联动数据获取
    childByValue(data) {
      let area = this.queryData;
      area.provid = data.provid || "";
      area.cityid = data.cityid || "";
      area.distid = data.distid || "";
      area.strtid = data.strtid || "";
      area.commid = data.commid || "";
      area.comminid = data.comminid || "";
    },

  },
};
</script>

<style>
td[class="y ivu-table-column-center"] {
  background: #02d792 !important;
  color: #fff;
}
td[class="n ivu-table-column-center"] {
  background: #f00 !important;
  color: #fff;
}
.page {
  padding: 1em 0.5em;
}
</style>
